<template>
	<div class="layout-padding">
		<splitpanes horizontal>
			<pane size="50">
				<div class="layout-padding-auto layout-padding-view">
					<el-form :model="state.queryForm" ref="queryRef" :inline="true" @keyup.enter="getDataList">
						<el-form-item :label="$t('bom.materialCode')" prop="materialCode">
							<el-input v-model="state.queryForm.materialCode" clearable />
						</el-form-item>

						<el-form-item :label="$t('bom.materialName')" prop="materialName">
							<el-input v-model="state.queryForm.materialName" clearable />
						</el-form-item>

						<el-form-item :label="$t('bom.facialMaskSpec')" prop="facialMaskSpec">
							<el-input v-model="state.queryForm.facialMaskSpec" clearable />
						</el-form-item>

						<el-form-item>
							<el-button icon="el-icon-search" type="primary" @click="query"> {{ $t('so.query')
							}}</el-button>
							<el-button icon="refresh" @click="resetQuery">{{ $t('so.reset')
							}}</el-button>

						</el-form-item>
					</el-form>

					<el-table :data="state.dataList" highlight-current-row v-loading="state.loading" border
						style="width: 100%; height: 100%" :cell-style="tableStyle.cellStyle" stripe
						:header-cell-style="tableStyle.headerCellStyle" @row-click="clickRow">
						<el-table-column type="index" label="#" width="80" />
						<el-table-column prop="materialCode" :label="$t('bom.materialCode')" show-overflow-tooltip />
						<el-table-column prop="materialName" :label="$t('bom.materialName')" show-overflow-tooltip />
						<el-table-column prop="isDefault" :label="$t('bom.isDefault')" show-overflow-tooltip>
							<template #default="scope">
								<!--根据不同的状态选择不同的颜色的tag-->
								<el-tag :type="scope.row.isDefault === 'Y' ? 'success' : 'danger'"
									:effect="scope.row.isDefault === 'Y' ? 'dark' : 'light'">
									{{ scope.row.isDefault }}
								</el-tag>
							</template>
						</el-table-column>
						<el-table-column prop="version" :label="$t('bom.version')" show-overflow-tooltip />
						<el-table-column prop="materialSpec" :label="$t('bom.materialSepc')" show-overflow-tooltip
							width="300" />
						<el-table-column prop="facialMaskSpec" :label="$t('bom.facialMaskSpec')"
							show-overflow-tooltip />
						<el-table-column prop="oilFilmType" :label="$t('bom.oilFilmType')" show-overflow-tooltip />
						<el-table-column prop="filmDegrees" :label="$t('bom.filmDegrees')" show-overflow-tooltip />
						<el-table-column prop="peFilm" :label="$t('bom.peFilm')" show-overflow-tooltip />
					</el-table>

					<pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle"
						v-bind="state.pagination" />

				</div>
			</pane>
			<pane size="50">
				<bomDetilList ref="bomDetailRef" />
			</pane>
		</splitpanes>
	</div>
</template>


<script setup lang="ts">
import { BasicTableProps, useTable } from '/@/hooks/table';
import { queryBom } from '/@/api/platform/digital/basBom';
import { ref, reactive } from 'vue';
import { ElMessage } from 'element-plus';
import { useI18n } from 'vue-i18n';
import bomDetilList from "./bomDetail.vue";
const { t } = useI18n();

// 搜索变量
const queryRef = ref();
const bomDetailRef = ref();
//表格的配置
const state: BasicTableProps = reactive<BasicTableProps>({
	queryForm: {

	},
	pageList: queryBom,
});

const { tableStyle, getDataList, sizeChangeHandle, currentChangeHandle } = useTable(state);

// 清空搜索条件
const resetQuery = () => {
	// 清空搜索条件
	queryRef.value?.resetFields();

	getDataList(false);
};

const query = () => {

	getDataList();
};
// 点击行的时候触发
const clickRow = (row: any) => {
	bomDetailRef.value.query(row);
}
</script>